<template>
  <div ref="pieBox" class="pieBox"></div>
</template>

<script setup>
  import {ref,reactive,onMounted} from "vue"
  //按需引入 echarts 的饼图
  import * as echarts from "echarts/core"
  import {PieChart} from "echarts/charts"
  import {TitleComponent} from "echarts/components"
  import {LabelLayout,UniversalTransition} from "echarts/features"
  import {CanvasRenderer} from "echarts/renderers"

  import {debounce} from "../assets/utility.js"

  /**组件接收的参数
   * @param {object} option 图表配置项，具体查看官方文档，支持 title 和 series，且只能渲染饼图*/
  const props = defineProps(["option"])

  //注册 echarts 的组件
  echarts.use([PieChart,LabelLayout,UniversalTransition,CanvasRenderer,TitleComponent])

  //图表容器
  const pieBox = ref()
  //图表对象
  let chart = reactive({})

  //初始化
  function init(){
    chart = echarts.init(pieBox.value)
    chart.setOption(props.option)
  }

  //设置大小
  const setResize = debounce(()=>{
    chart.resize()
  },500)

  //监听窗口大小改变
  window.addEventListener("resize",setResize)

  onMounted(()=>{
    init()
  })
</script>

<style scoped>
  .pieBox{
    width: 100%;
    height: 100%;
  }
</style>